﻿$(function() {
    /**
     * 瓶颈设备
     * */
	var piechart1 = echarts.init(document.getElementById('piechart1'));
    optionpie1 = {
	    tooltip : {
	    	 formatter: "{b} : {c}%"
	    },
	    backgroundColor:'#e0e0e0',
	    legend: {
	    	top:'top',
            right:'1%',
            data: ['报警占满载比重']
        },
	    series: [{
            name: '报警占满载比重',
            type: 'gauge',
            radius:"70%",
            startAngle:140,
            endAngle:-140,
            clockwise:true,
            min:0,
            max:100,
            splitNumber:10, //分割段数
            axisTick:{//刻度
            	show:true,
            	splitNumber:5
            },
            axisLine:{//轴线
            	show:true,
            	lineStyle:{
            		color:[[0.2, '#27dd27'], [0.4, '#d4a411'],[0.8, '#a4c2f4'], [1, '#e86767']],
            		width: 30
            	}
            },
            axisTick:{            // 坐标轴小标记
                show: true,        // 属性show控制显示与否，默认不显示
                splitNumber: 5,    // 每份split细分多少段
                length :8,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: '#eee',
                    width: 1,
                    type: 'solid'
                }
            },
            axisLabel:{           // 坐标轴文本标签
                show: true,
                formatter: function(v){
                    switch (v+''){
                        case '10': return '弱';
                        case '30': return '低';
                        case '60': return '中';
                        case '90': return '高';
                        default: return '';
                    }
                },
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: '#333'
                }
            },
            pointer : {
                length : '80%',
                width : 8,
                color : 'auto'
            },
            splitLine: {           // 分隔线
                show: true,        // 默认显示，属性show控制显示与否
                length :30,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    color: '#eee',
                    width: 2,
                    type: 'solid'
                }
            },
            title:{
                show : true,
                offsetCenter: ['-65%', -10],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: '#333',
                    fontSize : 15
                }
            },
            detail:{
                show : true,
                backgroundColor: 'rgba(0,0,0,0)',
                borderWidth: 0,
                borderColor: '#ccc',
                width: 100,
                height: 40,
                offsetCenter: ['-60%', 10],       // x, y，单位px
                formatter:'{value}%',
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: 'auto',
                    fontSize : 20
                }
            },
            data:[{ value:0}]
        }]
	};
    piechart1.setOption(optionpie1);
   
    
    /**
     * 最大潜能设备
     * */
    var piechart2 = echarts.init(document.getElementById('piechart2'));
    optionpie2 = {
	    tooltip : {
	    	 formatter: "{b} : {c}%"
	    },
	    backgroundColor:'#e0e0e0',
	    legend: {
	    	top:'top',
            right:'1%',
            data: ['报警占满载比重']
        },
	    series: [{
            name: '报警占满载比重',
            type: 'gauge',
            radius:"70%",
            startAngle:140,
            endAngle:-140,
            clockwise:true,
            min:0,
            max:100,
            splitNumber:10, //分割段数
            axisTick:{//刻度
            	show:true,
            	splitNumber:5
            },
            axisLine:{//轴线
            	show:true,
            	lineStyle:{
            		color:[[0.2, '#27dd27'], [0.4, '#d4a411'],[0.8, '#a4c2f4'], [1, '#e86767']],
            		width: 30
            	}
            },
            axisTick:{            // 坐标轴小标记
                show: true,        // 属性show控制显示与否，默认不显示
                splitNumber: 5,    // 每份split细分多少段
                length :8,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: '#eee',
                    width: 1,
                    type: 'solid'
                }
            },
            axisLabel:{           // 坐标轴文本标签
                show: true,
                formatter: function(v){
                    switch (v+''){
                        case '10': return '弱';
                        case '30': return '低';
                        case '60': return '中';
                        case '90': return '高';
                        default: return '';
                    }
                },
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: '#333'
                }
            },
            pointer : {
                length : '80%',
                width : 8,
                color : 'auto'
            },
            splitLine: {           // 分隔线
                show: true,        // 默认显示，属性show控制显示与否
                length :30,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    color: '#eee',
                    width: 2,
                    type: 'solid'
                }
            },
            title:{
                show : true,
                offsetCenter: ['-65%', -10],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: '#333',
                    fontSize : 15
                }
            },
            detail:{
                show : true,
                backgroundColor: 'rgba(0,0,0,0)',
                borderWidth: 0,
                borderColor: '#ccc',
                width: 100,
                height: 40,
                offsetCenter: ['-60%', 10],       // x, y，单位px
                formatter:'{value}%',
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: 'auto',
                    fontSize : 20
                }
            },
            data:[{ value:0}]
        }]
	};
    piechart2.setOption(optionpie2);
    
    /**
	 * 设备开动情况
	 * */
    var optbar = echarts.init(document.getElementById('optbar'));
    optionBar2 = {
    		tooltip : {
    	        trigger: 'axis',
    	        axisPointer: {
    		        type: 'shadow'
    		    }
    	    },
    	    grid: {
                top: '15%',
                left: '5%',
                right: '5%',
                bottom:'15%',
                containLabel: true
            },
            backgroundColor:'#e0e0e0',
            color:["#8dc63f","#cc3f44"],
    	    legend: {
    	    	bottom:25,
    	        data:['耗电情况(度)','设备开动率(%)']
    	    },
    	    xAxis : [{
    	            type : 'category',
    	            data : [],
    	            splitLine:{
    	            	show:false
    	            },
		            axisLabel :{  
					    interval:0
					}
    	        }],
    	    yAxis : [{
    	    	    min:0,
    	            type : 'value',
    	            name : '耗电情况(度)',
    	            axisLabel : {
    	                formatter: '{value}'
    	            },
    	            splitLine:{
    	            	show:false
    	            }
    	        }, {
    	        	min:0,
    	        	max:100,
    	            type : 'value',
    	            name : '设备开动率(%)',
    	            axisLabel: {
    	            	formatter: '{value}%'
    	            },
    	            splitLine:{
    	            	show:false
    	            }
    	        }],
    	    series : [{
                name:'耗电情况(度)',
                barMaxWidth:60,
                type:'bar',
                data:[]
            },{
                name:'设备开动率(%)',
                yAxisIndex: 1,
                type:'line',
                data:[]
            }]
    	};
    optbar.setOption(optionBar2);
    
    
    var lineId=0;
    var	startMonth=1;
    var	endMonth=1;
    var year=moment().year();
    
    /**
     * slider滑动事件
     * */
    $('#ss').slider({
    	range: true,
    	max:12,
		tipFormatter: function(value){    
        	return "第"+value+"月";
        },
        onComplete:function(value){//滑块值改变时触发
	       	startMonth=value[0];
	       	endMonth=value[1];
	       	getData();
       }
    });
    /**
     * 初始化
     * */
    var vm = new Vue({
	    el: '#itemData',
	    data:{item:[]}
	}); 
    var weeks=[1,moment().month()+1];
    $('#ss').slider('setValues',weeks);
    var arr=$('#ss').slider('getValues');
    startMonth=arr[0];
    endMonth=arr[1];
    getData();

    function getData(){
    	$.post(basePath+"/compare/startratecompare/month.json",{"lineId":lineId,belongYear:year,start:startMonth,end:endMonth},function(res){
    		vm.$set('item',res);
//    		if(res.success){
    		piechart1.setOption({
				series: [{
					data:[{ value:res.bottleneckRate}]
				}]
			});
    		piechart2.setOption({
				series: [{
					data:[{ value:res.proficiencyRate}]
				}]
			});
			optbar.setOption({
    			xAxis: {
		            data: res.equNames
		        },
		        series : [{
	                name:'耗电情况(度)',
	                data:res.electricityBar
	            },{
	                name:'设备开动率(%)',
	                data:res.startRateLine
	            }]
    		});
//    		}	
    	});
    }
  //点击事件
	 $("#defineTime").click(function (){
		 var mePanel = $('#defineTimeWin');
	   	 mePanel.dialog('open');
	 });
	//定义时间的表单
	$('#defineTimeWin').dialog({
		title:'自定义时间',
		width:400,
		height:150,
		iconCls:'icon-add',
		closed: true,
		modal: true,
		inline:true,
		buttons:[{
			text:'确定',
			iconCls:'icon-add-new',
			handler:function(){
					var st=$("input[name='startTime']").val();
					year=st;
					getData();
					$('#defineTimeWin').dialog('close');

			}
		},{
			text:'取消',
			iconCls:'icon-redo',
			handler:function(){
				$('#defineTimeWin').dialog('close');
			}
		}],
		onClose: function() {
			$('#defineTimeform').form('reset');
		}
	});
	 /**
	  * 切换设备的点击事件
	  * */
	var mePanel = $('#switchEquip');
	$("#linetree").tree({
		onDblClick: function(node) {
			if (node.url) {
//				if(node.shifts){
					lineId=node.id;
		 			getData();
		 			mePanel.dialog('close');

//				}else{
//					$.messager.alert({showSpeed:100,title:'消息提示',msg:'该生产线无班次，请重新选择',timeout:3000});
//				}
//				lineId=node.id;
			}else{
				$.messager.alert({showSpeed:100,title:'消息提示',msg:'请选择生产线！',timeout:3000});
			}
		}
	});
$("#switchEquipOK").click(function(){
	var row = $("#linetree").tree('getSelected');
	if(row.url){
		lineId=row.id;
		getData();
		mePanel.dialog('close');
	}else{
		$.messager.alert({showSpeed:100,title:'消息提示',msg:'请选择生产线！',timeout:3000});
	}
});
});